<template>
  <div>
    <div class="common-layout" align="center">
      <h2>兔头(麻辣味)-商品溯源</h2>
      <el-container >
        <el-header style="height: 350px;">
          <img :src="'http://localhost:55799/Imge/'+form.traceabilityIamnges" 
            style="width: 300px;height: 300px;margin-top: 20px;">
          <h2 style="font-weight: bold;">兔头（麻辣味）</h2>
        </el-header><br>
        <el-main style="background-color: beige;">
          <div>
            <span style="font-weight: bold;margin-right: 90px;">
              {{ form.traceabilityBatch }} </span>
            <span style="font-weight: bold;margin-left: 50px;">
              {{ form.traceabilityDay }}天</span><br>
            <span style="margin-right: 90px;">生产批次</span>
            <span style="margin-left: 50px;">保质期</span>
              <br><br>  
            <span style="font-weight: bold;">
              {{ form.traceabilityNumber }}</span>
            <span style="font-weight: bold;margin-left: 10px;">
              {{ form.traceabilityLicense }}</span><br>
            <span style="margin-right: 90px;">生产许可证号</span>
            <span style="margin-left: 60px;">生产企业</span>
          </div> 
        </el-main>
        <el-main>
          <span style="font-size: 20px;font-weight: bold;">产品检验报告</span>
        <!-- 照片 -->
          <el-upload
            class="avatar-uploader"
            v-model:file-list="form.Image"
            action="http://localhost:55799/api/Trace/UpdateFile"
            list-type="picture-card"
            :on-remove="handleRemove"
            :on-success="AddSuccess">
            <el-icon><Plus /></el-icon>
          </el-upload>
        </el-main>        
        <el-footer>
          <van-tabs v-model:active="form.radio" scrollspy sticky>
            <van-tab title="养殖信息">
              <span style="font-size: 20px;">养殖信息</span>&nbsp;
            </van-tab>
            <van-tab title="屠宰信息">屠宰信息</van-tab>
            <van-tab title="深加工信息">深加工信息</van-tab>
          </van-tabs>
        </el-footer>
      </el-container>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, reactive } from 'vue';

const form=reactive({
  traceabilityId:3,
  traceabilityIamnges:'',
  traceabilityBatch:'',
  traceabilityDay:'',
  traceabilityNumber:'',
  traceabilityLicense:'',
  Image:[],
  radio:'TraceFarming'
})
onMounted(()=>{
  Fan()
})
//反填
const Fan=()=>{
  axios.get('Trace/GetId', {
    params: {
      id:form.traceabilityId
    }
  }).then((ret) => {
    console.log(ret.data)
    form.traceabilityBatch=ret.data.traceabilityBatch
    form.traceabilityDay=ret.data.traceabilityDay
    form.traceabilityNumber=ret.data.traceabilityNumber
    form.traceabilityLicense=ret.data.traceabilityLicense
    form.traceabilityIamnges=ret.data.traceabilityIamnges
  })
  BackImge()
}
//产品检验图删除
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const handleRemove= (uploadFile:any) => {
  console.log(uploadFile)
  axios.delete('Trace/DeletePhoto', {
    params: {
      url:uploadFile.url
    }
  }).then((ret) => {
    console.log(ret.data)
    if(ret.data>0){
      ElMessage.success('删除成功')
    }else{
      ElMessage.error('删除失败')
    }
  })
}
 
//产品检验报告图片
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const AddSuccess=(Imge:any)=>{
  Imge='http://localhost:55799/Imge/'+Imge
  form.Image=Imge
  axios.post(`Trace/AddPhoto`,{
    photoImge:form.Image,
    traceabilityId:form.traceabilityId,
    traceabilityBatch:form.traceabilityBatch
  }).then((ret) => {
    console.log(ret.data)
    if(ret.data>0){
      ElMessage.success('添加成功')
    }else{
      ElMessage.error('添加失败')
    }
  })
}
//图片反填
const BackImge=()=>{
  axios.get('Trace/GetPhoto', {
    params: {
      id:form.traceabilityId
    }
  }).then((ret) => {
    console.log(ret.data)
    form.Image = ret.data
    console.log(form.Image);
  })
}

</script>

<style scoped>

</style>